<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-lg p-6">
    <div>
      <label for="Notes">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Notes </span>

        <div
          class="relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600 dark:border-gray-600"
        >
          <textarea
            id="Notes"
            class="w-full resize-none border-none focus:ring-0 sm:text-sm dark:bg-gray-900 dark:text-white"
            rows="4"
          ></textarea>

          <div class="flex items-center justify-end gap-2 p-1.5">
            <button
              type="button"
              class="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
            >
              Clear
            </button>

            <button
              type="button"
              class="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-700"
            >
              Save
            </button>
          </div>
        </div>
      </label>
    </div>
  </body>
</html>
